<template>
  <div>
    <h2>展示所有项目</h2>
    <table id="app" width="100%" border="0" cellpadding="0" cellspacing="1">
      <tbody>
      <tr>
        <td width="10%" align="center" valign="center" bgcolor="#fba661">编号ID</td>
        <td width="40%" align="center" valign="center" bgcolor="#fba661">分类名称</td>
        <td width="20%" align="center" valign="center" bgcolor="#fba661">申报开始时间</td>
        <td width="20%" align="center" valign="center" bgcolor="#fba661">申报结束时间</td>
        <td width="10%" align="center" valign="center" bgcolor="#fba661">项目</td>
      </tr>
      <tr v-for="(project,i) in projects">
        <td align="center" valign="center" bgcolor="#f3f3f3">{{ project.categoryid }}</td>
        <td align="center" valign="center" bgcolor="#f3f3f3">{{ project.categoryname }}</td>
        <td align="center" valign="center" bgcolor="#f3f3f3">{{ project.repStartTime }}</td>
        <td align="center" valign="center" bgcolor="#f3f3f3">{{ project.repStopTime }}</td>
        <td align="center" valign="center" bgcolor="#f3f3f3">
          <button @click="sendCid(i)">项目</button>
        </td>
      </tr>
      <!--      实验数据 仅有前端时需注释函数中的存储session id-->
      <!--      <tr>-->
      <!--        <td align="center" valign="center" bgcolor="#f3f3f3">2</td>-->
      <!--        <td align="center" valign="center" bgcolor="#f3f3f3">SSH</td>-->
      <!--        <td align="center" valign="center" bgcolor="#f3f3f3">2008-12-24</td>-->
      <!--        <td align="center" valign="center" bgcolor="#f3f3f3">2009-01-15</td>-->
      <!--        <td align="center" valign="center" bgcolor="#f3f3f3">-->
      <!--          <button @click="sendCid(i)">项目</button>-->
      <!--        </td>-->
      <!--      </tr>-->
      </tbody>
    </table>

    <router-view/>
  </div>
</template>
<script>
import four from '../../util/four';

export default {
  data() {
    return {
      projects: [],
    }
  },
  mounted() {
    this.getProjects()
  },
  methods: {
    getProjects() {
      //获取用户id
      let uid = JSON.parse(sessionStorage.getItem("userid"));
      let eid;
      //根据用户id查询专家信息
      four.get("/experts/getByUid/" + uid).then((res) => {
        eid = res.data.data.expertid;
        //根据专家id查询项目
        four.get("/projectCategorys/getExpertProject/" + eid).then((res) => {
          this.projects = res.data.data;
        })
      });
    },
    sendCid(i) {
      sessionStorage.setItem("cid", JSON.stringify(this.projects[i].categoryid));
      this.$router.push({
        path: '/expert/showproject'
      })
    }
  }
}
</script>
<style scoped>
.center {
  position: absolute;
  width: 500px;
  height: 500px;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>